<template>
  <div class="bg">
    <div class="box">
      <p class="p-one">{{ miniArr[0] }}</p>
      <p class="p-two">{{ miniArr[1] }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      miniArr: ["移动端暂不支持", "请使用电脑（PC端）查看"],
    };
  },
  mounted() {
    if (this._isMobile()) {
            return
        } else {
            this.$router.replace('/index');
        }
  },
  methods: {
    // 判断设备是移动端还是pc端
    _isMobile() {
      let flag = navigator.userAgent.match(
        /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
      );
      return flag;
    },
  },
};
</script>

<style scoped lang="less">
.bg {
  width: 100vw;
  height: 100vh;
  background-color: #666;
  display: flex;
  justify-content: center;
  align-items: center;
  .box {
    p {
      color: white;
      text-align: center;
      line-height: 3rem;
    }
    .p-one {
      font-size: 2.5rem;
    }
    .p-two {
      font-size: 1.5rem;
    }
  }
}
</style>